import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { Tag } from '@components'
import './index.scss'

export default class ItemFlow extends Component {
  static defaultProps = {
    list: []
  }

  handleClick = (item) => {
    Taro.navigateTo({
      url: `/pages/item/item?itemId=${item.itemId}`
    })
  }

  render () {
    const { list } = this.props
    return (
      <View className='comp-item-list'>
        {list.map(item => (
          <View
            key={item.itemId}
            className='comp-item-list__item'
            onClick={this.handleClick.bind(this, item)}
          >
            <Image className='comp-item-list__item-img' src={item.itemImage} />
            {!!item.simpleDesc && !!item.simpleDescFlag &&
            <Text className='comp-item-list__item-desc' numberOfLines={1} >
              {item.simpleDesc}
            </Text>
            }
            <View className='comp-item-list__item-info'>
              {!!item.limitedTag &&
              <Tag text={item.limitedTag} />
              }
              <Text className='comp-item-list__item-name'>
                {item.itemName}
              </Text>

              <View className='comp-item-list__item-price-wrap'>
                <Text className='comp-item-list__item-price' >
                  ¥{item.sellingPrice}
                </Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    )
  }
}
